// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    // 在app上添加指令，第一个参数为指令名，以 v-··· 的方式使用
    app.directive('img-lazy', {
      // 在元素挂在完毕执行,钩子
      mounted(el, binding) {
        // el:被绑定指令的元素 如img
        // binding：binding.value 等于号后面绑定的表达式的值 如图片url
        // 监听元素是否进入可视区域,会一直处于监听的状态
        // 这个方法执行之后会返回一个stop方法，用于结束监听
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // isIntersecting：是否进入可视区域，布尔值
          if (isIntersecting) {
            // 监听到进入可视区域，设置图片地址
            el.src = binding.value
            stop()
          }
        })
      },
    })
  },
}
